<template>
  <div>
    <div style="width: 700px; padding: 0 30px">
      <el-form :model="shopConfig" label-width="180px">
        <el-form-item label="店铺名称" required>
          <el-input v-model="shopConfig.name" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="小程序菜单栏上的公告" required>
          <el-input
            v-model="shopConfig.notice"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item label="营业状态" style="text-align: left" required>
          <el-switch
            v-model="shopConfig.status === 1"
            active-text="营业中"
            inactive-text="休息中"
            @change="updateShopStatus"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="配送方式" style="text-align: left" required>
          外卖配送
          <el-switch v-model="shopConfig.takeOutEnable" @change="submitForm">
          </el-switch>
          到店自取
          <el-switch v-model="shopConfig.takeInEnable" @change="submitForm">
          </el-switch>
        </el-form-item>
        <div v-if="shopConfig.takeOutEnable">
          <el-form-item label="外卖配送费(单位: 分)">
            <el-input-number
              style="float: left"
              v-model="shopConfig.sendingPrice"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="外卖打包费(单位: 分)">
            <el-input-number
              style="float: left"
              v-model="shopConfig.packingPrice"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="外卖起送价格(单位: 分)">
            <el-input-number
              style="float: left"
              v-model="shopConfig.sendingNeedPrice"
            ></el-input-number>
          </el-form-item>
        </div>
        <el-form-item label="开始营业时间" required>
          <el-input v-model="shopConfig.startTime" maxlength="5" placeholder="(比如:09:30)"></el-input>
        </el-form-item>
        <el-form-item label="开始歇业时间" required>
          <el-input v-model="shopConfig.endTime" maxlength="5" placeholder="(比如:10:00)"></el-input>
        </el-form-item>
        <el-form-item label="是否显示店铺热销商品" style="text-align: left">
          <el-switch
            v-model="shopConfig.flagShowShopPopularGoods"
            @change="updateFlagShowShopPopularGoods"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="店铺热销商品展示数量" v-if="shopConfig.flagShowShopPopularGoods">
          <el-input-number
              style="float: left"
              v-model="shopConfig.shopPopularGoodsMaxNum"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="shopConfig.relationPhones"
            maxlength="35"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系QQ">
          <el-input v-model="shopConfig.relationQQ" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="联系微信">
          <el-input
            v-model="shopConfig.relationWeixin"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input v-model="shopConfig.address" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="店铺描述">
          <el-input
            type="textarea"
            v-model="shopConfig.description"
            maxlength="100"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
import * as shopAdminApi from "../api/shopAdminApi.js";

export default {
  name: "shopConfig",
  data() {
    return {
      shopConfig: {},
    };
  },
  mounted() {
    this.getShopConfig();
  },
  methods: {
    getShopConfig() {
      shopAdminApi.getShopConfig({
        success: (res) => {
          this.shopConfig = res.data;
        },
      });
    },
    // 更新店铺状态
    updateShopStatus() {
      let newStatus = this.shopConfig.status === 1 ? 2 : 1;
      this.shopConfig.status = newStatus;
      shopAdminApi.updateShopConfig({
        data: this.shopConfig,
        success: (res) => {
          this.$notify.success(newStatus === 1 ? "开始营业" : "已设置为休息中");
          this.getShopConfig();
        },
      });
    },
    // 更新flag-是否显示店铺热销商品
    updateFlagShowShopPopularGoods(){
      let newStatus = this.shopConfig.flagShowShopPopularGoods;
      this.shopConfig.flagShowShopPopularGoods = newStatus;
      shopAdminApi.updateShopConfig({
        data: this.shopConfig,
        success: () => {
          this.$notify.success(newStatus ? "已设置为展示" : "已设置为隐藏");
          this.getShopConfig();
        },
      });
    },
    submitForm() {
      this.shopConfig.packingPrice = Math.floor(this.shopConfig.packingPrice);
      this.shopConfig.sendingPrice = Math.floor(this.shopConfig.sendingPrice);
      this.shopConfig.sendingNeedPrice = Math.floor(
        this.shopConfig.sendingNeedPrice
      );
      this.shopConfig.shopPopularGoodsMaxNum = Math.floor(this.shopConfig.shopPopularGoodsMaxNum);
      shopAdminApi.updateShopConfig({
        data: this.shopConfig,
        success: (res) => {
          this.$notify.success("更新成功");
          this.getShopConfig();
        },
      });
    },
  },
};
</script>
